{% extends 'layout/basic.html' %}

{% load static %}
{% block title %}用户登陆{% endblock %}

{% block css %}
	<link rel="stylesheet" href="{% static 'css/account.css' %}">
	<style>
        .error-msg {
            color: red;
            position: absolute;
            font-size: 13px;
        }
	</style>
{% endblock %}

{% block content %}
	<div class="account">
		<div class="title">用户登陆</div>
		<form method="POST" novalidate>
			{% csrf_token %}
			{% for field in form %}
				{% if field.name == 'sms_code' %}
					<div class="form-group">
						<label for="{{ field.id_for_label }}">{{ field.label }}</label>
						<div class="row">
							<div class="col-xs-5">
								{{ field }}
								<span class="error-msg">{{ field.errors.0 }}</span>
							</div>
							<div class="form-group">
								<div class="row">
									<div class="col-xs-5">
										{{ form.code }}
										<span style="color:red;">{{ form.code.errors.0 }}</span>
									</div>
									<div>
										<div class="col-xs-4">
											<img src="{% url 'img_code' %}" id="image_code" title="点击更换图片">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				{% else %}
					<div class="form-group">
						<label for="{{ field.id_for_label }}">{{ field.label }}</label>
						{{ field }}
						<span class="error-msg">{{ field.errors.0 }}</span>
					</div>
				{% endif %}
			{% endfor %}

			<div class="row">
				<div class="col-xs-15">
					<div class="col-xs-5">
						<input type="submit" class="btn btn-primary" value="登陆">
					</div>
				</div>
				<div class="col-xs-5">
					<div>
						<a href="{% url 'login_sms' %}">验证码登陆?</a>
					</div>
				</div>
			</div>
		</form>
	</div>


{% endblock %}

{% block js %}
	<script>
        $(function () {
            // 点击图片验证码刷新
            $('#image_code').click(function () {
                $(this).attr('src', '{% url 'img_code' %}?' + Math.random());
            })
        })
	</script>
{% endblock %}
